<template>
  <div class="tabComponent">
    <button
    v-for="tab in tabs"
    :key="tab.title"
    :class="['tab-button',{active:currentTab===tab.title}]"
    @click="currentTab = tab.title">
    {{ tab.displayName }}
    </button>

    <keep-alive>
      <component :is="currentTabComponent" :content="content" class="tab"></component>
    </keep-alive>
  </div>
</template>
<script>
import BookIntroduction from './BookIntroduction'
import BookCommentList from './BookCommentList'
import BookQA from './BookQA'
export default {
  name: "TabComponent",
  props:{
    content:{
      type:String,
      default:''
    }
  },
  data () {
    return {
      currentTab:'introduction',
      tabs:[
        {title:'introduction',displayName:'图书介绍'},
        {title:'comment',displayName:'图书评价'},
        {title:'qa',displayName:'图书问答'}
      ]
    };
  },
  components:{
    BookIntroduction,
    BookCommentList,
    BookQA
  },
  computed:{
    currentTabComponent:function(){
      return 'book-'+this.currentTab;
    }
  }
}
</script>
<style scoped>
.tabComponent{
  float: left;
  width: 100%;
  text-align: left;
  margin-left: 80px;
}
.tab-button {
  padding: 6px 10px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border: solid 1px #ccc;
  cursor: pointer;
  background: #f0f0f0;
  margin-bottom: -1px;
  margin-right: -1px;
}
.tab-button:hover {
  background: #e0e0e0;
}
.tab-button.active {
  background: #cdcdcd;
}
.tab {
  border: solid 1px #ccc;
  padding: 10px;
}
</style>